<template>
  <div class="case-library">
    <!-- 顶部搜索 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-4">
        <h1 class="text-xl font-bold text-gray-800 mb-4">案例库</h1>
        <div class="flex flex-col md:flex-row gap-4">
          <div class="flex-1">
            <div class="relative">
              <input 
                v-model="searchKeyword" 
                type="text" 
                placeholder="搜索案例关键词..."
                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
              <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
          <select v-model="selectedCategory" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            <option value="">所有类型</option>
            <option value="traffic">交通事故</option>
            <option value="labor">劳动纠纷</option>
            <option value="contract">合同纠纷</option>
            <option value="property">房产纠纷</option>
            <option value="medical">医疗纠纷</option>
            <option value="marriage">婚姻家庭</option>
          </select>
        </div>
      </div>
    </header>

    <div class="container mx-auto px-4 py-6">
      <!-- 统计信息 -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg p-4 shadow-sm text-center">
          <div class="text-2xl font-bold text-blue-600">{{ totalCases }}</div>
          <div class="text-sm text-gray-600">总案例数</div>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-sm text-center">
          <div class="text-2xl font-bold text-green-600">{{ successRate }}%</div>
          <div class="text-sm text-gray-600">胜诉率</div>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-sm text-center">
          <div class="text-2xl font-bold text-orange-600">{{ recentCases }}</div>
          <div class="text-sm text-gray-600">近期案例</div>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-sm text-center">
          <div class="text-2xl font-bold text-purple-600">{{ categories.length }}</div>
          <div class="text-sm text-gray-600">案例分类</div>
        </div>
      </div>

      <!-- 分类标签 -->
      <div class="flex flex-wrap gap-2 mb-6">
        <button 
          v-for="category in categories" 
          :key="category.key"
          @click="selectedCategory = category.key"
          :class="[
            'px-4 py-2 rounded-full text-sm font-medium transition-colors',
            selectedCategory === category.key 
              ? 'bg-blue-600 text-white' 
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          ]"
        >
          <i :class="category.icon" class="mr-1"></i>
          {{ category.name }}
          <span class="ml-1 text-xs">({{ category.count }})</span>
        </button>
      </div>

      <!-- 案例列表 -->
      <div class="space-y-6">
        <div 
          v-for="caseItem in filteredCases" 
          :key="caseItem.id"
          class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
        >
          <div class="p-6">
            <!-- 案例标题和标签 -->
            <div class="flex justify-between items-start mb-4">
              <div class="flex-1">
                <div class="flex items-center mb-2">
                  <span 
                    :class="getCategoryColor(caseItem.category)"
                    class="px-3 py-1 rounded-full text-xs font-medium mr-3"
                  >
                    {{ getCategoryName(caseItem.category) }}
                  </span>
                  <span 
                    :class="getResultColor(caseItem.result)"
                    class="px-3 py-1 rounded-full text-xs font-medium"
                  >
                    {{ getResultText(caseItem.result) }}
                  </span>
                </div>
                <h3 class="text-lg font-bold text-gray-800 mb-2">{{ caseItem.title }}</h3>
                <p class="text-gray-600 mb-3">{{ caseItem.summary }}</p>
              </div>
            </div>

            <!-- 案例详情 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 text-sm">
              <div class="flex items-center text-gray-600">
                <i class="fas fa-gavel mr-2"></i>
                <span>{{ caseItem.court }}</span>
              </div>
              <div class="flex items-center text-gray-600">
                <i class="fas fa-calendar mr-2"></i>
                <span>{{ formatDate(caseItem.judgmentDate) }}</span>
              </div>
              <div class="flex items-center text-gray-600">
                <i class="fas fa-user-tie mr-2"></i>
                <span>{{ caseItem.lawyer }}</span>
              </div>
            </div>

            <!-- 关键信息 -->
            <div class="bg-gray-50 rounded-lg p-4 mb-4">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="text-gray-600">争议金额：</span>
                  <span class="font-medium text-blue-600">{{ caseItem.disputeAmount }}</span>
                </div>
                <div>
                  <span class="text-gray-600">判决金额：</span>
                  <span class="font-medium text-green-600">{{ caseItem.judgmentAmount }}</span>
                </div>
                <div class="md:col-span-2">
                  <span class="text-gray-600">关键词：</span>
                  <span class="font-medium">{{ caseItem.keywords.join(', ') }}</span>
                </div>
              </div>
            </div>

            <!-- 案例要点 -->
            <div class="mb-4">
              <h4 class="font-semibold text-gray-800 mb-2">案例要点：</h4>
              <ul class="list-disc list-inside text-sm text-gray-700 space-y-1">
                <li v-for="point in caseItem.keyPoints" :key="point">{{ point }}</li>
              </ul>
            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-end space-x-2">
              <button 
                @click="viewCaseDetail(caseItem)"
                class="px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
              >
                <i class="fas fa-eye mr-1"></i>查看详情
              </button>
              <button 
                @click="downloadCase(caseItem)"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                <i class="fas fa-download mr-1"></i>下载案例
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredCases.length === 0" class="text-center py-12">
        <div class="text-gray-400 mb-4">
          <i class="fas fa-folder-open text-6xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-600 mb-2">暂无相关案例</h3>
        <p class="text-gray-500">当前搜索条件下没有找到相关案例</p>
      </div>

      <!-- 分页 -->
      <div v-if="filteredCases.length > 0" class="flex justify-center mt-8">
        <div class="flex space-x-2">
          <button class="px-3 py-2 border border-gray-300 rounded text-sm hover:bg-gray-50">上一页</button>
          <button class="px-3 py-2 bg-blue-600 text-white rounded text-sm">1</button>
          <button class="px-3 py-2 border border-gray-300 rounded text-sm hover:bg-gray-50">2</button>
          <button class="px-3 py-2 border border-gray-300 rounded text-sm hover:bg-gray-50">3</button>
          <button class="px-3 py-2 border border-gray-300 rounded text-sm hover:bg-gray-50">下一页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'CaseLibrary',
  setup() {
    const searchKeyword = ref('')
    const selectedCategory = ref('')
    const cases = ref([])
    
    // 分类
    const categories = ref([
      { key: '', name: '全部', icon: 'fas fa-list', count: 0 },
      { key: 'traffic', name: '交通事故', icon: 'fas fa-car-crash', count: 0 },
      { key: 'labor', name: '劳动纠纷', icon: 'fas fa-briefcase', count: 0 },
      { key: 'contract', name: '合同纠纷', icon: 'fas fa-file-contract', count: 0 },
      { key: 'property', name: '房产纠纷', icon: 'fas fa-home', count: 0 },
      { key: 'medical', name: '医疗纠纷', icon: 'fas fa-stethoscope', count: 0 },
      { key: 'marriage', name: '婚姻家庭', icon: 'fas fa-heart', count: 0 }
    ])
    
    // 模拟案例数据
    const mockCases = [
      {
        id: 1,
        title: '交通事故人身损害赔偿纠纷案',
        summary: '机动车与行人发生交通事故，造成行人重伤，双方就赔偿金额产生争议。',
        category: 'traffic',
        result: 'win',
        court: '北京市朝阳区人民法院',
        judgmentDate: '2023-12-15',
        lawyer: '张律师',
        disputeAmount: '50万元',
        judgmentAmount: '45万元',
        keywords: ['交通事故', '人身损害', '赔偿纠纷', '机动车'],
        keyPoints: [
          '机动车驾驶员承担主要责任，行人承担次要责任',
          '医疗费、误工费、护理费等损失计算合理',
          '精神损害抚慰金酌情支持'
        ]
      },
      {
        id: 2,
        title: '劳动合同纠纷案',
        summary: '用人单位违法解除劳动合同，劳动者要求恢复劳动关系并支付赔偿金。',
        category: 'labor',
        result: 'win',
        court: '北京市海淀区人民法院',
        judgmentDate: '2023-11-20',
        lawyer: '李律师',
        disputeAmount: '15万元',
        judgmentAmount: '12万元',
        keywords: ['劳动合同', '违法解除', '赔偿金', '恢复劳动关系'],
        keyPoints: [
          '用人单位解除劳动合同理由不充分',
          '劳动者有权要求恢复劳动关系',
          '违法解除应支付二倍经济补偿金'
        ]
      },
      {
        id: 3,
        title: '房屋买卖合同纠纷案',
        summary: '卖方逾期交房且房屋存在质量问题，买方要求解除合同并赔偿损失。',
        category: 'property',
        result: 'partial',
        court: '北京市丰台区人民法院',
        judgmentDate: '2023-10-10',
        lawyer: '王律师',
        disputeAmount: '200万元',
        judgmentAmount: '180万元',
        keywords: ['房屋买卖', '逾期交房', '质量问题', '合同解除'],
        keyPoints: [
          '卖方构成根本违约，买方有权解除合同',
          '房屋质量问题影响正常使用',
          '违约金按照合同约定执行'
        ]
      }
    ]
    
    onMounted(() => {
      cases.value = mockCases
      updateCategoryCounts()
    })
    
    // 更新分类计数
    const updateCategoryCounts = () => {
      categories.value.forEach(category => {
        if (category.key === '') {
          category.count = cases.value.length
        } else {
          category.count = cases.value.filter(c => c.category === category.key).length
        }
      })
    }
    
    // 过滤后的案例
    const filteredCases = computed(() => {
      let filtered = cases.value
      
      if (searchKeyword.value) {
        filtered = filtered.filter(c => 
          c.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
          c.summary.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
          c.keywords.some(k => k.toLowerCase().includes(searchKeyword.value.toLowerCase()))
        )
      }
      
      if (selectedCategory.value) {
        filtered = filtered.filter(c => c.category === selectedCategory.value)
      }
      
      return filtered
    })
    
    // 统计数据
    const totalCases = computed(() => cases.value.length)
    const successRate = computed(() => {
      const winCases = cases.value.filter(c => c.result === 'win').length
      return Math.round((winCases / cases.value.length) * 100)
    })
    const recentCases = computed(() => {
      const oneMonthAgo = dayjs().subtract(1, 'month')
      return cases.value.filter(c => dayjs(c.judgmentDate).isAfter(oneMonthAgo)).length
    })
    
    // 获取分类名称
    const getCategoryName = (key) => {
      const category = categories.value.find(c => c.key === key)
      return category ? category.name : '其他'
    }
    
    // 获取分类颜色
    const getCategoryColor = (category) => {
      const colorMap = {
        traffic: 'bg-red-100 text-red-800',
        labor: 'bg-blue-100 text-blue-800',
        contract: 'bg-green-100 text-green-800',
        property: 'bg-purple-100 text-purple-800',
        medical: 'bg-orange-100 text-orange-800',
        marriage: 'bg-pink-100 text-pink-800'
      }
      return colorMap[category] || 'bg-gray-100 text-gray-800'
    }
    
    // 获取结果颜色
    const getResultColor = (result) => {
      const colorMap = {
        win: 'bg-green-100 text-green-800',
        partial: 'bg-yellow-100 text-yellow-800',
        lose: 'bg-red-100 text-red-800'
      }
      return colorMap[result] || 'bg-gray-100 text-gray-800'
    }
    
    // 获取结果文本
    const getResultText = (result) => {
      const textMap = {
        win: '胜诉',
        partial: '部分胜诉',
        lose: '败诉'
      }
      return textMap[result] || '未知'
    }
    
    // 格式化日期
    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }
    
    // 查看案例详情
    const viewCaseDetail = (caseItem) => {
      alert(`查看案例详情：${caseItem.title}`)
    }
    
    // 下载案例
    const downloadCase = (caseItem) => {
      alert(`下载案例：${caseItem.title}`)
    }
    
    return {
      searchKeyword,
      selectedCategory,
      cases,
      categories,
      filteredCases,
      totalCases,
      successRate,
      recentCases,
      getCategoryName,
      getCategoryColor,
      getResultColor,
      getResultText,
      formatDate,
      viewCaseDetail,
      downloadCase
    }
  }
}
</script>

<style scoped>
.case-library {
  padding: 20px 0;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 20px;
}

.library-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 